{% extends 'base/base1.html' %}

{% block title %}{{ product.name }} - 商品详情{% endblock %}

{% block main %}
<div class="container">
    <div class="row mt-5">
        <!-- 商品主图 -->
        <div class="col-md-6">
            <div class="product-main-image">
                <img src="{{ product.img.url }}" alt="{{ product.name }}" class="img-responsive">
            </div>
            
            <!-- 商品图集 -->
            {% if product.images.exists %}
                <div class="product-gallery mt-3">
                    <h4>商品图集</h4>
                    <div class="row">
                        {% for image in product.images.all %}
                            <div class="col-xs-3 mb-2">
                                <img src="{{ image.image.url }}" alt="{{ image.alt_text|default:product.name }}"
                                     class="thumbnail img-responsive">
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>
        
        <!-- 商品信息 -->
        <div class="col-md-6">
            <h1>{{ product.name }}</h1>
            <p class="text-muted">商品编码：{{ product.sku }}</p>
            <p class="price">售价：¥{{ product.price }}</p>
            <p>成本价：¥{{ product.cost_price }}</p>
            <p>库存：{{ product.stock }}</p>
            <p>分类：{{ product.category.title }}</p>
            <p>上架状态：{% if product.is_active %}已上架{% else %}已下架{% endif %}</p>
            <p>创建时间：{{ product.created_at|date:"Y-m-d H:i:s" }}</p>
            <p>更新时间：{{ product.updated_at|date:"Y-m-d H:i:s" }}</p>
            
            {% if product.description %}
                <div class="description mt-4">
                    <h4>商品描述</h4>
                    <p>{{ product.description }}</p>
                </div>
            {% endif %}
            
            <div class="actions mt-5">
                <a href="{% url 'main:home' %}" class="btn btn-primary">返回首页</a>
                <a href="{% url 'main:product_images' %}" class="btn btn-success">查看更多商品图片</a>
            </div>
        </div>
    </div>
</div>

<style>
.product-main-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.product-gallery .thumbnail {
    cursor: pointer;
    transition: border-color 0.3s;
}

.product-gallery .thumbnail:hover {
    border-color: #007bff;
}

.price {
    font-size: 24px;
    font-weight: bold;
    color: #dc3545;
}

.actions .btn {
    margin-right: 10px;
}
</style>
{% endblock %}